<template>
  <div class="container">
    <div v-if="!isChcekEnterVisiable">
      <!-- 未开户时页面 -->
      <el-row>
        <el-col :span="24">
          <el-card shadow="always"> {{ applyAccountMessage }} </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="btn_panel" :span="24">
          <el-button type="success" @click="applyOpenDialog" round
            >申请开户</el-button
          >

          <el-button round @click="reloadPager">刷新</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-else-if="isChcekEnterVisiable" class="enter_info">
      <!-- 开户状态页面 -->
      <el-form :model="enterpriseData">
        <el-row
          ><el-col :span="24" :lg="24" :md="18" :xm="6"
            ><el-form-item label="用户账号">
              <label
                ><el-tag type="success"
                  ><i class="el-icon-time"></i> 企业账户</el-tag
                ></label
              >
            </el-form-item></el-col
          ></el-row
        >
        <el-row>
          <el-col :span="8" :lg="8" :md="12" :xs="24" :sm="24">
            <el-form-item label="企业名称">
              <el-input
                class="handle-input"
                v-model="enterpriseData.enter_name"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :lg="8" :md="12" :xs="24" :sm="24">
            <el-form-item label="企业电话">
              <el-input
                class="handle-input"
                v-model="enterpriseData.enter_phone"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :lg="8" :md="12" :xs="24" :sm="24">
            <el-form-item label="企业传真">
              <el-input
                class="handle-input"
                v-model="enterpriseData.enter_fax"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :lg="8" :md="12" :xs="24" :sm="24">
            <el-form-item label="所属行业">
              {{ showIndustryName(enterpriseData.industry_id) }}
            </el-form-item>
          </el-col>
          <el-col :span="8" :lg="8" :md="12" :xs="24" :sm="24">
            <el-form-item label="开户日期">
              <el-input
                class="handle-input"
                v-model="enterpriseData.enable_time"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :lg="8" :md="12" :xs="24" :sm="24">
            <el-form-item label="租户有效期">
              <el-input
                class="handle-input"
                v-model="enterpriseData.expiration_time"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" :lg="24" :md="12" :xs="24" :sm="24">
            <el-form-item label="企业地址">
              <el-input
                class="handle-input"
                v-model="enterpriseData.enter_address"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="diliver">
          <el-col :span="24">
            <div>
              <h3>企业介绍</h3>
            </div>
            <div class="txt_info">
              {{ enterpriseData.enter_intro }}
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 申请开户弹出窗口 -->
    <el-dialog
      title="申请开户"
      :visible.sync="applyDialogIsVisiable"
      :append-to-body="true"
    >
      <!-- 表单内容 -->
      <el-form
        ref="applyFormData"
        :model="applyFormData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="企业名称：" prop="enter_name">
          <el-input
            v-model="applyFormData.enter_name"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业电话：" prop="enter_phone">
          <el-input
            v-model="applyFormData.enter_phone"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业传真：">
          <el-input
            v-model="applyFormData.enter_fax"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属行业：" prop="industry_id">
          <el-select v-model="applyFormData.industry_id" placeholder="选择行业">
            <el-option label="碳资产开发" value="1"></el-option>
            <el-option label="光伏太阳能" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业地址：" prop="enter_address">
          <el-input
            v-model="applyFormData.enter_address"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业介绍：">
          <el-input
            type="textarea"
            placeholder="请输入介绍"
            v-model="applyFormData.enter_intro"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="文件上传">
          <input id="uploadimg" type="file" ref="postuploader" />
          <el-button @click="addPostUpLoad">上传</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="validateForm('applyFormData')"
            >申请开通</el-button
          >
          <el-button @click="applyDialogIsVisiable = false">取消申请</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { applyAccount, validateApplyAccount,addPostUpload } from "@/api";

export default {
  name: "EnterManagerView",
  data() {
    return {
      applyDialogIsVisiable: false, //默认申请开户的提交窗口不显示
      applyAccountMessage: "",
      applyFormData: {
        enter_name: "", //企业名称
        enter_phone: "",
        enter_fax: "",
        industry_id: "",
        enter_address: "",
        enter_intro: "",
        img_url:"",
        user_id: JSON.parse(localStorage.getItem("User")).user_id,
        user_state: JSON.parse(localStorage.getItem("User")).user_state,
      },
      enterpriseData: {
        //加载开户成功后的企业信息
      },
      isChcekEnterVisiable: false, //设置开户页面显示
      //表单验证规则
      rules: {
        enter_name: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        enter_phone: [
          { required: true, message: "请输入企业电话", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "电话号码格式不正确",
            trigger: "blur",
          },
        ],
        industry_id: [
          { required: true, message: "请选择企业所属行业", trigger: "blur" },
        ],
        enter_address: [
          { required: true, message: "请输入企业地址", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    //初始加载验证开户状态
    this.validateApplyAccount();
  },
  methods: {
    //点击申请开户，打开dialog窗口
    applyOpenDialog() {
      this.applyDialogIsVisiable = true;
    },
    //表单验证方法
    validateForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //验证成功
          //执行提交
          this.applyAccount();
        } else {
          //验证失败
          return false;
          //   this.$message.error('验证失败');
        }
      });
    },
    //申请开户方法
    async applyAccount() {
      let res = await applyAccount(this.applyFormData);
      if (res.code == 200) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        //提交成功后关闭窗口
        this.applyDialogIsVisiable = false;
        //刷新页面组件申请状态
        this.validateApplyAccount();
      } else if (res.code == 201) {
        this.$message({
          message: res.msg,
          type: "warning",
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    //检测当前用户是否开通，根据当前用户id，请求用户的user_state状态
    async validateApplyAccount() {
      let res = await validateApplyAccount(this.applyFormData);
      console.log(res);
      if (res.code == 200) {
        //用户已开通
        this.isChcekEnterVisiable = true;
        //将企业信息赋值给组件变量
        console.log(res.data);
        this.enterpriseData = res.data;
      } else if (res.code == 201) {
        //用户未开通
        this.isChcekEnterVisiable = false;
        this.applyAccountMessage = res.msg;
      } else {
        this.$message.error("获取数据异常");
      }
    },
    //显示所属行业文字内容
    showIndustryName(num) {
      switch (num) {
        case 1:
          return "碳资产开发";
        case 2:
          return "光伏太阳能";
      }
    },
    //测试文件上传
    async addPostUpLoad() {
      //找到输入框的文件
      let input = this.$refs.postuploader; // document.getElementById("uploadimg");
      //新建变量FormData
      const formData = new FormData();      
	   //将输入框的文件添加到formData中用于提交后端
      formData.append("image", input.files[0]);
      //请求后端进行上传
      let res = await addPostUpload(formData);
      console.log(res)
      if (res.code == 200) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.applyFormData.img_url = res.data;
      }
    },
    //刷新
    reloadPager() {
      location.reload();
    },
  },
};
</script>

<style scoped>
.container .el-row {
  margin-bottom: 10px;
}

.btn_panel {
  text-align: center;
}

.enter_info {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.flex {
  display: flex;
}

.handle-input {
  width: 240px;
  display: inline-block;
}

.diliver {
  border-top: dashed 1px #ccc;
  padding-top: 20px;
}

.txt_info {
  margin-top: 20px;
}
</style>